<script setup>
import { ref, onMounted } from "vue";
import { listJoinProject, agreeJoinProject, refuseJoinProject } from "@/api/project.js";
import { ElMessage, ElMessageBox } from "element-plus";

// 数据
const projectApplications = ref([]);
const loading = ref(false);
const error = ref(null);

// 获取项目申请列表
const fetchProjectApplications = async () => {
  loading.value = true;
  try {
    const response = await listJoinProject();
    if (response.data.code === 200) {
      projectApplications.value = response.data.data;
    } else {
      throw new Error(response.msg || "获取数据失败");
    }
  } catch (err) {
    error.value = err.message || "请求失败";
  } finally {
    loading.value = false;
  }
};

// 同意申请
const approveApplication = async (id, userId) => {
  ElMessageBox.confirm('您确定要同意这个申请吗？', '确认同意申请', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(async () => {
        const response = await agreeJoinProject(id, userId);
        if (response.data.code === 200) {
          ElMessage.success("同意申请成功");
          await fetchProjectApplications(); // 刷新申请列表
        } else {
          ElMessage.error(response.data.msg || "同意申请失败");
        }
      })
      .catch(() => {
        ElMessage.info('您已取消同意申请');
      });
};

// 驳回申请
const rejectApplication = async (id, userId) => {
  try {
    const { value: remark } = await ElMessageBox.prompt(
        "请输入驳回理由",
        "驳回申请",
        {
          confirmButtonText: "提交",
          cancelButtonText: "取消",
          inputValidator: (value) => !!value || "驳回理由不能为空",
          inputType: "textarea",
        }
    );
    // 调用后端接口
    const response = await refuseJoinProject({
      projectId: id,
      userId: userId,
      remark: remark,
    });
    if (response.data.code === 200) {
      ElMessage.success("驳回申请成功");
      await fetchProjectApplications(); // 刷新申请列表
    } else {
      ElMessage.error(response.data.msg || "驳回申请失败");
    }
  } catch {
    ElMessage.info("驳回操作已取消");
  }
};

// 初始化时加载数据
onMounted(fetchProjectApplications);
</script>

<template>
  <el-container style="margin-left: -80px;">
    <el-header>
      <h1 style="text-align: center; margin-left: -20px;">审核加入项目申请</h1>
    </el-header>

    <el-main  >
      <!-- 错误提示 -->
      <el-alert v-if="error" type="error" :closable="false" title="获取数据失败" />

      <!-- 表格展示 -->
      <el-table
          v-if="!loading"
          :data="projectApplications"
          border
          style="width: 100%"
      >
        <el-table-column prop="projectName" label="项目名称" width="200" />
        <el-table-column label="项目图片" width="150">
          <template #default="{ row }">
            <img :src="row.image" alt="项目图片" class="table-image" />
          </template>
        </el-table-column>
        <el-table-column prop="lab" label="实验室" width="150" />
        <el-table-column prop="user.userName" label="申请人姓名" width="100" />
        <el-table-column prop="user.academy" label="申请人学院" width="130" />
<!--        班级-->
        <el-table-column prop="user.className" label="申请人班级" width="100" />
        <el-table-column prop="user.phone" label="联系方式" width="120" />
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button
                type="success"
                size="small"
                @click="approveApplication(row.id, row.user.userId)"
            >
              同意
            </el-button>
            <el-button
                type="danger"
                size="small"
                @click="rejectApplication(row.id, row.user.userId)"
            >
              驳回
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 加载状态 -->
      <el-skeleton v-else animated :rows="5" />
    </el-main>
  </el-container>
</template>

<style scoped>
.table-image {
  width: 100%;
  max-height: 100px;
  object-fit: contain;
  border-radius: 8px;
}
</style>
